import React, { Component } from 'react'
import { message, Row, Col, Icon, Button } from 'antd'
import '../../../less/index.less'
import * as excellentQuizCommentsActions from '../../../actions/excellent-quiz-comments'
import { TwsReactMarkdownPreview, TwsReactMarkdownEditor } from 'tws-antd'
import { connect } from 'react-redux'
import {getUploadUrl} from '../../../constant/upload-url'
import { FormattedMessage } from 'react-intl'
import {convertContent} from '../../../constant/lang-util'

class Comment extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isShowComments: false,
      showCommentInput: false,
      content: '',
      commentBtnContent: <FormattedMessage id='我要评价' />,
      assignmentId: this.props.assignmentId,
      quizId: this.props.quizId,
      studentId: this.props.studentId
    }
  }

  showComments () {
    this.setState({
      isShowComments: !this.state.isShowComments
    })
  }

  showCommentInput () {
    this.setState({
      showCommentInput: !this.state.showCommentInput,
      commentBtnContent: this.state.commentBtnContent ? <FormattedMessage id='我要评价' /> : <FormattedMessage id='关闭' />
    })
  }

  submitComment () {
    if (this.state.content.trim() === '') {
      message.warning(convertContent('请输入评价内容'))
    } else {
      const {taskId, assignmentId, quizId, studentId, content} = this.state
      this.showCommentInput()
      this.props.submitComment(taskId, assignmentId, quizId, studentId, content)
    }
  }

  render () {
    const comments = this.props.excellentQuizComments
    const {settings} = this.props
    const {isShowComments, showCommentInput} = this.state

    return (
      <div>
        <Row className='margin-t-2'>
          <Col span={15}>
            <div onClick={this.showComments.bind(this)}>
              {comments.length === 0 ? '' : isShowComments ? <div><FormattedMessage id='收起评论' /><Icon type='caret-down' /></div>
                : <div>{comments.length} {convertContent('条评论')}<Icon type='caret-right' /></div>
              }
            </div>
          </Col>
          <Col span={9}>
            <Button onClick={this.showCommentInput.bind(this)}>{this.state.commentBtnContent}</Button>
          </Col>
        </Row>
        <div className={showCommentInput ? 'margin-t-2' : 'hidden'}>
          <TwsReactMarkdownEditor
            action={getUploadUrl(settings.appContextPath)}
            onChange={content => this.setState({content})} />

          <Col span={4} offset={20}>
            <Button type='primary' className='margin-t-2' onClick={this.submitComment.bind(this)}><FormattedMessage id='提交' /></Button>
          </Col>
        </div>
        <div className={isShowComments ? '' : 'hidden'}>
          {
            comments.map((comment, index) => {
              return (
                <div className='mark-down-wrap margin-t-2' key={index}>
                  <span style={{display: 'inline-block'}} className='margin-b-1'>{comment.userName + ' : '}</span>
                  <TwsReactMarkdownPreview source={comment.content} />
                </div>
              )
            })
          }
        </div>
      </div>)
  }
}
const mapStateToProps = ({excellentQuizComments, settings}) => ({excellentQuizComments, settings})
const mapDispatchToProps = dispatch => ({
  submitComment: (taskId, assignmentId, quizId, studentId, content) => dispatch(excellentQuizCommentsActions.submitExcellentQuizComment(taskId, assignmentId, quizId, studentId, content))
})

export default connect(mapStateToProps, mapDispatchToProps)(Comment)
